<template>
  <!-- <Dialog ref="dialog" width="1000" title="网站信息"> -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header" @click="back">
        <ArrowLeftBold style="width: 1em; height: 1em" />
        <span>志愿讲堂购买</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      status-icon
      style="margin-left: 20px"
    >
      <el-form-item class="form_item el-col-10" label="标题" prop="title">
        <el-input v-model="ruleForm.title" placeholder="请输入标题" clearable />
      </el-form-item>

      <el-form-item class="form_item el-col-10" label="轮播图" prop="banner">
        <upLoad
          :limit="1"
          v-model="ruleForm.banner"
          :modelValue="modelValueBanner"
          class="Banner"
          @update:modelValue="modelValue"
          limitatSize="banner"
          :limitShowTip="true"
          :isShowTip="false"
        >
        </upLoad>
      </el-form-item>

      <el-form-item
        class="form_item el-col-10"
        label="详情图"
        prop="infoBanner"
      >
        <upLoad
          :limit="1"
          v-model="ruleForm.infoBanner"
          :modelValue="modelValueinfoBanner"
          @update:modelValue="modelValue2"
          limitatSize="infoBanner"
          :limitShowTip="true"
          :isShowTip="false"
        >
        </upLoad>
      </el-form-item>
      <!-- <el-form-item class="form_item el-col-10" label="LOGO图" prop="logo">
        <upLoad
          :limit="1"
          v-model="ruleForm.logo"
          :modelValue="modelValueLogo"
          @update:modelValue="modelValueLogoIcon"
          limitatSize="infoBanner"
          :limitShowTip="true"
          :isShowTip="false"
        >
        </upLoad>
      </el-form-item> -->
      <el-form-item label="详情介绍" label-width="70px">
        <!-- <Editor :height="400" @update:modelValue="editorChange"></Editor> -->
        <UEditorPlus
          :id="id1"
          style="width: 900px; z-index: 0"
          @update:modelValue="editorChange"
          v-model="ruleForm.info"
        />
      </el-form-item>
      <el-form-item label="是否分类">
        <el-switch v-model="ruleForm.off" />
      </el-form-item>
    </el-form>
    <el-divider />
    <div class="right">
      <el-button type="primary" class="height40" @click="submit"
        >提交</el-button
      >
    </div>
  </el-card>
</template>

<script setup>
import upLoad from '@/components/ImageUpload2';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const id1 = ref('etidorNewGood1');
const router = useRouter();
const ruleFormRef = ref(null);
const pcDescription = ref('');
import href from '@/modules';
const { classroomBannerApi, ZYbannerInfoApi } = href;
const ruleForm = ref({
  title: '',
  banner: '',
  infoBanner: '',
  off: '',
  info: '',
  herf: '#',
  logo: '',
});
const rules = {
  title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
  banner: [{ required: true, trigger: 'blur', message: '请上传轮播图' }],
  infoBanner: [{ required: true, trigger: 'blur', message: '请上传详情图' }],
  // logo: [{ required: true, trigger: 'blur', message: '请上传logo图' }],
};

const modelValueBanner = ref([]); //轮播图
const modelValueinfoBanner = ref([]); //轮播详情
// const modelValueLogo = ref([]);
const modelValue = (val) => {
  ruleForm.value.banner = val;
  modelValueBanner.value = val;
};
const modelValue2 = (val) => {
  ruleForm.value.infoBanner = val;
  modelValueinfoBanner.value = val;
};
// const modelValueLogoIcon = (val) => {
//   modelValueLogo.value = val;
// };
const editorChange = (val) => {
  pcDescription.value = val;
};
const bannerAdd = async (params) => {
  // ruleForm.value.off = ruleForm.value.off
  //   ? (ruleForm.value.off = 1)
  //   : (ruleForm.value.off = 2);
  const data = await classroomBannerApi(params);
  console.log(data, 'data');
  if (data.code == 20000) {
    ElMessage({
      message: data.msg,
      type: 'success',
    });
    bannerInfo();
  }
};
const bannerInfo = async () => {
  const data = await ZYbannerInfoApi(ruleForm.value);
  Object.assign(ruleForm.value, data.data);
  ruleForm.value.off = data.data.off == 1 ? true : false;
};
// 提交
function submit() {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      // 创建一个表单数据副本，不修改原始绑定的值
      const formData = { ...ruleForm.value };
      formData.off = formData.off === true ? 1 : 2;
      bannerAdd(formData);
    }
  });
}
onMounted(async () => {
  bannerInfo();
});
const back = () => {
  router.push({ path: '/operation/classRoom' });
};
</script>

<style scoped>
.form_item {
  margin-bottom: 20px !important;
  margin-right: 20px;
}

.right {
  margin-left: 40px;
}
.card-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
<style lang="scss">
.Banner .el-upload-list--picture-card .el-upload-list__item {
  width: 800px !important; /* 使用 !important 确保样式覆盖 */
}
</style>
